<template>
  <div class="agent-finance">
    <h1>佣金管理</h1>
    
    <div class="finance-summary">
      <div class="summary-card">
        <div class="summary-icon blue">
          <i class="fas fa-wallet"></i>
        </div>
        <div class="summary-content">
          <div class="summary-title">待结算佣金</div>
          <div class="summary-value">¥12,580.50</div>
          <div class="summary-desc">较上月 <span class="up">+15%</span></div>
        </div>
      </div>
      
      <div class="summary-card">
        <div class="summary-icon green">
          <i class="fas fa-chart-line"></i>
        </div>
        <div class="summary-content">
          <div class="summary-title">本月已结算</div>
          <div class="summary-value">¥8,320.75</div>
          <div class="summary-desc">较上月 <span class="up">+8%</span></div>
        </div>
      </div>
      
      <div class="summary-card">
        <div class="summary-icon orange">
          <i class="fas fa-hand-holding-usd"></i>
        </div>
        <div class="summary-content">
          <div class="summary-title">可提现余额</div>
          <div class="summary-value">¥6,450.25</div>
          <div class="summary-desc">
            <router-link to="/agent/finance/withdrawals" class="btn-withdraw">申请提现</router-link>
          </div>
        </div>
      </div>
      
      <div class="summary-card">
        <div class="summary-icon purple">
          <i class="fas fa-calendar-check"></i>
        </div>
        <div class="summary-content">
          <div class="summary-title">累计佣金</div>
          <div class="summary-value">¥152,680.00</div>
          <div class="summary-desc">今年总收入</div>
        </div>
      </div>
    </div>
    
    <div class="finance-tabs">
      <div class="tab active">佣金明细</div>
      <router-link to="/agent/finance/withdrawals" class="tab">提现记录</router-link>
      <div class="tab">分销商佣金分析</div>
      <div class="tab">佣金规则</div>
    </div>
    
    <div class="finance-filter">
      <div class="date-range">
        <input type="date" class="date-input" placeholder="开始日期">
        <span class="date-separator">至</span>
        <input type="date" class="date-input" placeholder="结束日期">
        <button class="btn-filter">筛选</button>
      </div>
      <div class="export-action">
        <button class="btn-export"><i class="fas fa-file-export"></i> 导出明细</button>
      </div>
    </div>
    
    <div class="finance-table">
      <table>
        <thead>
          <tr>
            <th>订单号</th>
            <th>分销商</th>
            <th>佣金金额</th>
            <th>订单金额</th>
            <th>佣金比例</th>
            <th>结算状态</th>
            <th>创建时间</th>
            <th>结算时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in 10" :key="i">
            <td>ORD{{ 1000000 + i }}</td>
            <td>分销商{{ (i % 5) + 1 }}</td>
            <td>¥{{ 20 + i * 10 }}</td>
            <td>¥{{ 200 + i * 100 }}</td>
            <td>{{ 10 + i % 5 }}%</td>
            <td>
              <span 
                class="status-badge" 
                :class="{
                  'status-pending': i % 3 === 0,
                  'status-settled': i % 3 === 1,
                  'status-processing': i % 3 === 2
                }"
              >
                {{ i % 3 === 0 ? '待结算' : i % 3 === 1 ? '已结算' : '结算中' }}
              </span>
            </td>
            <td>2023-06-{{ 10 + i }}</td>
            <td>{{ i % 3 === 1 ? '2023-06-' + (20 + i) : '-' }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="finance-chart">
      <h3>佣金趋势分析</h3>
      <div class="chart-placeholder">
        <!-- 这里将放置佣金趋势图表 -->
        <div class="placeholder-text">佣金趋势图表将显示在这里</div>
      </div>
    </div>
    
    <div class="pagination">
      <a href="#" class="page-link">&laquo;</a>
      <a href="#" class="page-link active">1</a>
      <a href="#" class="page-link">2</a>
      <a href="#" class="page-link">3</a>
      <a href="#" class="page-link">&raquo;</a>
    </div>
  </div>
</template>

<script setup lang="ts">
// 佣金管理页面组件逻辑
</script>

<style scoped>
.agent-finance {
  padding: 20px;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.summary-card:hover {
  transform: translateY(-5px);
}

.summary-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.summary-icon.blue {
  background-color: #3b82f6;
}

.summary-icon.green {
  background-color: #10b981;
}

.summary-icon.orange {
  background-color: #f59e0b;
}

.summary-icon.purple {
  background-color: #8b5cf6;
}

.summary-content {
  flex: 1;
}

.summary-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 5px;
}

.summary-value {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 5px;
}

.summary-desc {
  font-size: 13px;
  color: #6b7280;
}

.up {
  color: #10b981;
}

.down {
  color: #ef4444;
}

.btn-withdraw {
  background-color: #f59e0b;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.2s;
  display: inline-block;
  text-decoration: none;
}

.btn-withdraw:hover {
  background-color: #d97706;
}

.finance-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.tab {
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab:hover {
  color: #3b82f6;
}

.tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.finance-filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

.date-range {
  display: flex;
  align-items: center;
}

.date-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  width: 140px;
}

.date-separator {
  margin: 0 10px;
  color: #6b7280;
}

.btn-filter {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-filter:hover {
  background-color: #2563eb;
}

.btn-export {
  background-color: transparent;
  border: 1px solid #3b82f6;
  color: #3b82f6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-export:hover {
  background-color: #3b82f6;
  color: white;
}

.finance-table {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
}

th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #374151;
}

tr:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-pending {
  background-color: #fee2e2;
  color: #b91c1c;
}

.status-settled {
  background-color: #d1fae5;
  color: #047857;
}

.status-processing {
  background-color: #e0e7ff;
  color: #1e40af;
}

.finance-chart {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.finance-chart h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  color: #374151;
}

.chart-placeholder {
  height: 300px;
  background-color: #f9fafb;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-text {
  color: #6b7280;
  font-style: italic;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 5px;
}

.page-link {
  display: inline-block;
  padding: 6px 12px;
  background-color: white;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}

.page-link.active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}
</style> 